<style scoped lang="less">
    .common-left-margin-8 {
        margin-left: 8px;
    }
</style>

<template>

    <!-- common-top -->
    <div class="common-top-container">
        <div class="common-top-ver-line"></div>
        <a class="common-top-title-left" v-link="pageData.link">{{ pageData.title }}</a>
        <div class="common-top-right">
            <i-button class="common-right-btn" type="primary" size="small" @click="modelFormEdit()"
                      icon="ios-personadd-outline">新增教师
            </i-button>
        </div>
    </div>

    <!-- tb-container -->
    <div class="tb-container">

        <!-- tb-container-top -->
        <i-select :model.sync="searchData.teacherRole" size="small" placeholder="选择教师角色"
                  class="common-short-size common-left-btn" clearable>
            <i-option v-for="item in dict.teacherRoles" :value="item.dictKey">{{ item.dictVal }}</i-option>
        </i-select>
        <i-input class="common-short-size common-left-btn" size="small" :value.sync="searchData.teacherName"
                 placeholder="教师姓名"></i-input>
        <i-input class="common-short-size common-left-btn" size="small" :value.sync="searchData.teacherNum"
                 placeholder="教师编号"></i-input>
        <i-button class="common-left-btn" size="small" type="primary" icon="ios-search">搜索</i-button>

        <!-- tb-container-table -->
        <div class="z-table-container">
            <i-table class="z-table" border :content="tableData.self" :columns="tableData.columns"
                     :data="tableData.data" stripe></i-table>
        </div>
        <div class="z-flip-container">
            <div class="z-flip-page">
                <Page class="z-teacher-manage-page" :current="tableData.flip.currentPage"
                      :total="tableData.flip.totalCount"
                      simple></Page>
            </div>
            <p class="z-flip-text">共{{tableData.flip.totalCount}}条</p>
        </div>

    </div>

    <Modal
            :title="modelFormData.title"
            :visible.sync="modelFormData.visible"
            :mask-closable="false"
            :closable="false"
    >
        <i-form v-ref:model-form-data-validate :model="modelFormData.editObj" :rules="modelFormData.validate"
                :label-width="80"
                class="z-form">
            <Form-item label="教师姓名" prop="teacherName">
                <i-input :value.sync="modelFormData.editObj.teacherName" placeholder="请输入姓名"
                         class="z-form-controller"></i-input>
            </Form-item>
            <Form-item label="教师编号" prop="teacherNum">
                <i-input :value.sync="modelFormData.editObj.teacherNum" placeholder="请输入编号"
                         class="z-form-controller"></i-input>
            </Form-item>
            <Form-item label="教师角色" prop="teacherRole">
                <i-select :model.sync="modelFormData.editObj.teacherRole" placeholder="选择教师角色"
                          class="z-form-controller">
                    <i-option v-for="item in dict.teacherRoles" :value="item.dictKey">{{ item.dictVal }}</i-option>
                </i-select>
            </Form-item>
        </i-form>
        <div slot="footer">
            <i-button type="text" @click="modelFormCancel('modelFormDataValidate')">取消</i-button>
            <i-button type="primary" @click="modelFormSubmit('modelFormDataValidate')"
                      :loading="modelFormData.loading">
                提交
            </i-button>
        </div>
    </Modal>
</template>

<script type="text/javascript">
    import dict from '../../libs/dict'

    export default {
        data () {
            return {
                dict: dict,

                pageData: {
                    title: '教师管理',
                    link: '/school/teachers'
                },

                searchData: {
                    teacherName: '',
                    teacherNum: '',
                    teacherRole: '',
                },

                tableData: {
                    self: this,
                    columns: [
                        {
                            type: 'index',
                            width: 40,
                            align: 'center'
                        },
                        {
                            title: '教师姓名',
                            key: 'teacherName'
                        },
                        {
                            title: '教师编号',
                            key: 'teacherNum'
                        },
                        {
                            title: '教师角色',
                            key: 'teacherRole',
                            render (row, column, index){
                                return dict.getVal('teacherRoles', row.teacherRole);
                            }
                        },
                        {
                            title: '操作',
                            key: 'action',
                            width: 150,
                            align: 'center',
                            render (row, column, index) {
                                return `<i-button type="primary" size="small" @click="modelFormEdit(${index})">编辑</i-button> <i-button type="error" size="small" @click="tableDataRemove(${index})">删除</i-button>`;
                            }
                        },
                    ],
                    data: [
                        {id: 1, teacherName: '王小明1', teacherNum: '2009012706', teacherRole: '1'},
                        {id: 2, teacherName: '王小明2', teacherNum: '2009012706', teacherRole: '1'},
                        {id: 3, teacherName: '王小明3', teacherNum: '2009012706', teacherRole: '2'},
                        {id: 4, teacherName: '王小明4', teacherNum: '2009012706', teacherRole: '1'},
                        {id: 5, teacherName: '王小明5', teacherNum: '2009012706', teacherRole: '1'},
                        {id: 6, teacherName: '王小明6', teacherNum: '2009012706', teacherRole: '1'},
                        {id: 7, teacherName: '王小明7', teacherNum: '2009012706', teacherRole: '1'},
                        {id: 8, teacherName: '王小明8', teacherNum: '2009012706', teacherRole: '1'},
                        {id: 9, teacherName: '王小明9', teacherNum: '2009012706', teacherRole: '1'},
                    ],
                    flip: {
                        currentPage: 2,
                        totalCount: 112
                    },
                },

                modelFormData: {
                    title: '新增教师',
                    initObj: {
                        id: null,
                        teacherName: '',
                        teacherNum: '',
                        teacherRole: ''
                    },
                    editObj: {
                        id: null,
                        teacherName: '',
                        teacherNum: '',
                        teacherRole: ''
                    },
                    editIndex: null,//正在编辑的table索引
                    validate: {
                        teacherName: [
                            {required: true, message: '姓名不能为空', trigger: 'blur'}
                        ],
                        teacherNum: [
                            {required: true, message: '编号不能为空,将用作教师登录账号', trigger: 'blur'},
                        ],
                        teacherRole: [
                            {required: true, message: '请选择教师角色', trigger: 'change'}
                        ],
                    },
                    loading: false,
                    visible: false,
                },

            };
        },

        methods: {
            modelFormEdit (index) {
                this.modelFormData.visible = true
                if (typeof index == 'undefined') {//create
                    this.modelFormData.editObj = JSON.parse(JSON.stringify(this.modelFormData.initObj));
                    this.modelFormData.editIndex = null;
                } else {//edit
                    var eData = this.tableData.data[index];
                    this.modelFormData.editIndex = index;
                    this.modelFormData.editObj = JSON.parse(JSON.stringify(eData));
                }
            },
            modelFormCancel(name){
                //清空填写的内容
                this.$refs[name].resetFields();
                //隐藏modal
                this.modelFormData.visible = false;
            },
            modelFormSubmit(name){
                var _this = this;
                this.$refs[name].validate(function (valid) {
                    if (valid) {
                        // loading && submit by ajax
                        _this.modelFormData.loading = true;
                        setTimeout(function () {
                            //submit success
                            _this.$Message.success('提交成功!');

                            //update table
                            console.log(JSON.stringify(_this.modelFormData.editObj));
                            if(_this.modelFormData.editIndex) {
                                _this.tableData.data.$set(_this.modelFormData.editIndex, JSON.parse(JSON.stringify(_this.modelFormData.editObj)));
                            }

                            //清空填写的内容
                            _this.$refs[name].resetFields();
                            //隐藏modal
                            _this.modelFormData.loading = false;
                            _this.modelFormData.visible = false;
                        }, 500);
                    } else {
                        _this.$Message.error('表单验证失败!');
                    }
                })
            },

            tableDataRemove (index) {
                var _this = this;
                _this.$Modal.confirm({
                    title: '确认删除么',
                    content: '<p>您确定删除教师XXXX么? 对话框将在 2秒 后关闭</p>',
                    loading: true,
                    onOk() {
                        setTimeout(function () {
                            _this.$Modal.remove();
                            _this.$Message.success('删除成功. 异步关闭了对话框');
                            _this.tableData.data.splice(index, 1);
                        }, 2000);
                    }
                });
            },
            tableDataRefresh(){
                //TODO:更新表单数据
            }
        }
    }
</script>